<template>
  <el-menu class="el-menu-demo" mode="horizontal" background-color="#545c64" text-color="#fff"
    active-text-color="#ffd04b" @select="handleSelect" :ellipsis="false">
    <el-menu-item index="/">
      <div style="display: flex; align-items: center; font-size: 35px">
        <img src="@/assets/images/logo.png" style="
            height: 54px;
            opacity: 0.5;
            border-radius: 11px;
            margin-right: 5px;
          " />自研平台
      </div>
    </el-menu-item>
    <el-sub-menu index="1">
      <template #title>
        <el-avatar style="margin-right: 2px; font-size: 30px">
          <span style="margin-bottom: 8px">{{
            userInfo.userName.substring(0, 1)
          }}</span> </el-avatar>{{ userInfo.userName }}
      </template>
      <el-menu-item index="/user/center/info" route="/user/center/info">个人中心</el-menu-item>
      <el-menu-item index="/user/center/modifyUserInfo" route="/user/center/modifyUserInfo">设置</el-menu-item>
      <el-menu-item index="/login" route="/login" @click="clearUserInfo">退出登录</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { ref, onMounted } from "vue";

const userInfo = ref({
  userName: "admin",
});

// 退出登录清空用户信息
const clearUserInfo = () => {
  localStorage.clear();
};

const handleSelect = (key, keyPath) => {
  console.log(key, keyPath);
  window.location.href = key;
};

onMounted(() => {
  userInfo.value = JSON.parse(localStorage.getItem("userInfo"));
});
</script>

<style scoped>
.el-menu--horizontal>.el-menu-item:nth-child(1) {
  margin-right: auto;
}

.el-menu--horizontal>.el-menu-item[data-v-0d055d06]:nth-child(1) {
  margin-right: auto;
  padding: 6px;
}
</style>
